/* 演示预览 start */
.demo-preview {
  position: relative;
  top: -1rpx;
  width: 100%;
  border-top: 1rpx solid transparent;
  background: url('https://resource.tuniaokj.com/images/index_bg/play1.jpg')
    no-repeat;
  background-size: 100% auto;

  .swiper {
    position: relative;
    width: 100%;
    height: 600rpx;

    .swiper-item {
      height: 100%;
      transform: translateY(-10rpx) scale(0.65);
      border-radius: 12rpx;
      transform-origin: center center;
      transition: transform 0.5s ease;

      &.active {
        transform: translateY(-10rpx) scale(0.9);
      }
    }
  }
}
/* 演示预览 end */

/* 页面内容 start */
.page {
  position: relative;
  width: 100%;

  /* 业务分类 start */
  .business-category {
    position: relative;
    width: 100%;
    padding: 50rpx 30rpx;
    display: flex;
    flex-wrap: wrap;

    .business-item {
      width: calc(100% / 4);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;

      .name {
        margin-top: 16rpx;
        color: var(--tn-color-gray);
      }
    }
  }
  /* 业务分类 end */

  /* 项目案例 start */
  .case-project {
    position: relative;
    width: 100%;
    padding: 0rpx 30rpx;

    .case-list {
      margin-top: 50rpx;

      .case-item {
        position: relative;
        width: 100%;
        height: 420rpx;
        border-radius: 12rpx;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;

        &::before {
          z-index: -1;
        }

        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: inherit;
          background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0) 100%
          );
          z-index: 1;
        }

        & + .case-item {
          margin-top: 40rpx;
        }

        .title {
          color: var(--tn-color-white);
          font-size: 34rpx;
          position: absolute;
          left: 30rpx;
          bottom: 30rpx;
          z-index: 2;
        }
      }
    }
  }
  /* 项目案例 end */
}
/* 页面内容 end */
